import React, { Component } from 'react'

import styles from './index.module.css'
import FilterFooter from '../../../../components/FilterFooter'

export default class FilterMore extends Component {
  state = {
    selectedValues: this.props.defaultValues
  }

  // 渲染标签
  renderFilters(dataInfo) {
    const { selectedValues } = this.state
    return dataInfo.map(item => {
      return (
        <span className={[styles.tag, selectedValues.indexOf(item.value) > -1 ? styles.tagActive : ''].join(' ')} key={item.value} onClick={() => this.handleTagClick(item.value)}>{item.label}</span>
      )
    })
  }

  // 点击标签事件响应
  handleTagClick(value) {
    const { selectedValues } = this.state
    // 创建新数组
    const newSelectedValues = [...selectedValues]

    if (selectedValues.indexOf(value) <= -1) {
      // 没有当前项的值
      newSelectedValues.push(value)
    } else {
      // 如果有则删除
      const index = newSelectedValues.findIndex(item => item === value)
      newSelectedValues.splice(index, 1)
    }
    this.setState({
      selectedValues: newSelectedValues
    })
  }

  // 清除按钮绑定事件
  cancelTags = () => {
    this.setState({
      selectedValues: []
    })
  }

  // 确定按钮绑定事件
  okTags = () => {
    const { type, OnSave } = this.props
    // 调用父组件的onSave方法存储数据
    OnSave(type, this.state.selectedValues)
  }

  // 渲染标签
  render() {
    const { data: { roomType, oriented, floor, characteristic }, onCancel, type } = this.props
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={() => onCancel(type)}></div>

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        {/* <FilterFooter onCancel={() => onCancel()} OnSave={() => OnSave(type, this.state.value)} /> */}
        <FilterFooter className={styles.footer} cancelText="清除" onCancel={this.cancelTags} OnSave={this.okTags} />
      </div>
    )
  }
}